<template>
	<view>
		<uni-calendar lunar :endDate='today' ref='calStart' :insert="false" :clearDate="false" @confirm="selDateStart"></uni-calendar>
		<uni-calendar lunar :endDate='today' ref='calEnd' :insert="false" :clearDate="false" @confirm="selDateEnd"></uni-calendar>
		<form @submit="query" @reset="reset">
			<view class="cell">
				<view class="cell-title">房号绑定码</view>
				<picker class="cell-content" mode="selector" :range="bindeds" @change="selCard"
				:value="cards.defaultIndex">
					<view class="horizontal">
						<view>{{card || '请选择房号'}}</view>
						<view class="gst">点击切换</view>
					</view>
				</picker>
			</view>
			<view class="cell">
				<view class="cell-title">房号</view>
				<view class="cell-content">{{cardInfo.address.roomAddress}}</view>
			</view>
			<view class="cell">
				<view class="cell-title">开始日期</view>
				<view class="cell-content" @tap="selectStart($event, start)">
					<view v-if="post.startTime==''" class="placeholder">请选择日期</view>
					<view v-else>{{post.startTime | smartTime('YY/mm/dd')}}</view>
				</view>
			</view>
			<view class="cell">
				<view class="cell-title">结束日期</view>
				<view class="cell-content" @tap="selectEnd($event, end)">
					<view v-if="post.endTime==''" class="placeholder">请选择日期</view>
					<view v-else>{{post.endTime | smartTime('YY/mm/dd')}}</view>
				</view>
			</view>
			<!-- <wyb-table ref="table" :headers="headers" :contents="contents" width="750rpx" height="700rpx" :sort-col="sortCol" :sort-ways="sortWays" :formatCol="formatCols"/> -->
			<view class="bottom horizontal">
				<button style="color: white;background-color: var(--color-ok);" class="capsule scale" form-type="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	
	const app = getApp()

	export default {
		computed: {
			bindeds(){
				return this.cards.userWaterCardList.map(card=>card.cardNo)
			},
			today() {
				return new Date().toLocaleDateString()
			}
		},
		filters:{
			date(date){
				return new Date(date).format('yyyy-MM-dd')
			}
		},
		components: {
			hgCell,
			wybTable,
			xflSelect,
		},
		data() {
			return {
				// 房号信息回显
				cardInfo:{
					roomId: '', // 房间id
					roomMaster: "",  // 户主姓名
					address: {
						streetAddress: "",  // 街道地址
						roomAddress: ""       // 房间地址
					}, 
					"type": 1   // 用户类型 1-个人 2-单位
				},
				post:{
					roomId: '',
					startTime: new Date().toLocaleDateString(),
					endTime: new Date().toLocaleDateString(),
					pageNum: 1,
					pageSize: 10,
				},
				get:{
					totalWaterNum: 1, // 总用水量
					orderList: {
						pageNum: 1, // 当前页数
						pageSize: 10, // 每页条数
						totalPage: -1, // 总页数
						total: -1, // 总条数
						list:[
							
						]
					}
				},
				card: ' ',
				room: '',
				cards:{
					defaultIndex: 0,
					userWaterCardList:[
						
					]
				},
			}
		},
		onLoad(opts) {
			// 获取绑定房号列表
			uni.request({
				header:{
					Authorization: 'Bearer ' + app.globalData.token,
				},
				url: app.globalData.url + 'waterCardNoList',
				method: 'GET',
				data: {},
				success: res => {
					const {data} = res
					console.log(data)
					if(data.code==200){
						this.cards = data.data
						this.card = this.bindeds[this.cards.defaultIndex || 0 || 0]
						this.post.roomId = this.cards.userWaterCardList[this.cards.defaultIndex || 0 || 0].roomId
					}else if(data.code==500){
						uni.showToast({
							icon:'none',
							title: res.message,
						})
					}
				},
				fail: (err) => {console.error(err)},
				complete: () => {}
			});
			// 房号信息回显
			uni.request({
				header:{
					Authorization: 'Bearer ' + app.globalData.token, 
				},
				url: app.globalData.url + 'defaultWaterCard',
				method: 'GET',
				success: res => {
					const {data} = res
					if(data.code==200){
						this.cardInfo=data.data
					}else if(data.code==500){
						uni.showToast({
							icon:'none',
							title: data.message,
						});
					}
				},
				fail: (err) => {console.error(err)},
				complete: () => {}
			});
			
		},
		methods: {
			reset(){
				this.end = this.start = new Date().toLocaleDateString()
			},
			selCard(evt){
				const {detail} = evt
				console.log(detail)
				this.card = this.bindeds[detail.value]
				// 房号信息回显
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.url + 'showWaterCardInfo',
					method: 'GET',
					data: {
						waterCardNo: this.card,
					},
					success: res => {
						const {data} = res
						if(data.code==200){
							console.log(data)
							this.cardInfo = data.data
							this.post.roomId = this.cardInfo.roomId
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			query(e){
				uni.navigateTo({
					url: `../query_result/query_result?roomId=${this.post.roomId}&startTime=${this.post.startTime}&endTime=${this.post.endTime}&room=${this.cardInfo.address.roomAddress}`,
				});
			},
			selDateStart(e) {
				const {
					year,
					month,
					date
				} = e;
				this.post.startTime = new Date(year, month-1, date).format('yyyy-MM-dd')
			},
			selDateEnd(e) {
				const {
					year,
					month,
					date
				} = e;
				this.post.endTime = new Date(year, month-1, date).format('yyyy-MM-dd')
			},
			selectStart(evt, date) {
				this.$refs.calStart.open()
			},
			selectEnd(evt, date) {
				this.$refs.calEnd.open()
			}
		}
	}
</script>

<style>

</style>
